<template>
  <div class="add-patient-bg">
    <van-nav-bar title="添加就诊人" left-arrow @click-left="goBack" />
    <div class="form-title">请认真填写就诊人信息</div>
    <van-form @submit="onAddPatient">
      <van-field
        v-model="relationNameShow"
        label="关系"
        placeholder="请选择与本人关系"
        readonly
        is-link
        @click="showRelation = true"
      />
      <van-field v-model="form.name" label="姓名" placeholder="请输入真实姓名" />
      <van-field
        v-model="idTypeNameShow"
        label="证件类型"
        placeholder="请选择证件类型"
        readonly
        is-link
        @click="showIdType = true"
      />
      <van-field v-model="form.id_number" label="证件号码" placeholder="输入证件号码" />
      <van-field v-model="form.card_number" label="就诊卡号" placeholder="请输入就诊卡号" />
      <van-field v-model="form.phone" label="手机号" placeholder="请输入手机号" />
      <van-field v-model="form.address" label="就诊人地址" placeholder="选填" />
      <div class="default-switch">
        <span>设为默认就诊人</span>
        <van-switch v-model="form.is_default" active-color="#338bff" size="20px" />
      </div>
      <div class="form-tip">初次添加请绑定本院就诊卡号，未持有请到医院自助机或窗口办理。</div>
      <van-button type="primary" block round native-type="submit">保存</van-button>
    </van-form>
    <van-action-sheet v-model:show="showRelation" title="选择关系类型" :actions="relationTypes" @select="onSelectRelation" />
    <van-action-sheet v-model:show="showIdType" title="选择证件类型" :actions="idTypes" @select="onSelectIdType" />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'

const router = useRouter()
const form = ref({
  relation_id: '',
  name: '',
  id_type: '',
  id_number: '',
  card_number: '',
  phone: '',
  address: '',
  is_default: false
})
const showRelation = ref(false)
const showIdType = ref(false)
const relationTypes = ref([])
const idTypes = ref([])

const relationNameShow = ref('')
const idTypeNameShow = ref('')

function goBack() {
  router.back()
}
function onSelectRelation(action) {
  form.value.relation_id = action.id
  relationNameShow.value = action.name
  showRelation.value = false
}
function onSelectIdType(action) {
  form.value.id_type = action.id
  idTypeNameShow.value = action.name
  showIdType.value = false
}
async function onAddPatient() {
  if (!form.value.name || !form.value.relation_id || !form.value.id_type || !form.value.phone) {
    showToast('请填写完整信息')
    return
  }
  const token = localStorage.getItem('token')
  const headers = { Authorization: token }
  const data = {
    name: form.value.name,
    relation: Number(form.value.relation_id),
    id_type: Number(form.value.id_type),
    id_number: form.value.id_number,
    card_number: form.value.card_number,
    phone: form.value.phone,
    address: form.value.address,
    is_default: form.value.is_default
  }
  await axios.post('http://127.0.0.1:8000/user/patients/', data, { headers })
  showToast('添加成功')
  router.back()
}
onMounted(async () => {
  const token = localStorage.getItem('token')
  if (!token) {
    showToast('请先登录')
    router.replace('/login')
    return
  }
  const headers = { Authorization: token }

  try {
    const relRes = await axios.get('http://127.0.0.1:8000/user/relationtypes/', { headers })
    console.log('关系接口返回', relRes.data)
    if (relRes.data && relRes.data.data) {
      relationTypes.value = relRes.data.data
      console.log('处理后的关系数据:', relationTypes.value)
    }

    const idRes = await axios.get('http://127.0.0.1:8000/user/idtypes/', { headers })
    console.log('证件类型接口返回', idRes.data)
    if (idRes.data && idRes.data.data) {
      idTypes.value = idRes.data.data
      console.log('处理后的证件类型数据:', idTypes.value)
    }

    relationNameShow.value = getRelationName(form.value.relation_id)
    idTypeNameShow.value = getIdTypeName(form.value.id_type)
  } catch (error) {
    console.error('获取数据失败:', error)
    showToast('获取数据失败')
  }
})

function getRelationName(id) {
  const rel = relationTypes.value.find(r => r.id === id)
  console.log('找到的关系:', rel)
  console.log('getRelationName返回:', rel ? rel.name : '')
  return rel ? rel.name : ''
}
function getIdTypeName(id) {
  console.log('当前id_type:', id)
  console.log('当前idTypes:', idTypes.value)
  const t = idTypes.value.find(i => i.id === id)
  console.log('找到的证件类型:', t)
  return t ? t.name : ''
}
</script>

<style scoped>
.add-patient-bg {
  min-height: 100vh;
  background: #f6f7fb;
  padding-bottom: 24px;
}
.form-title {
  font-size: 18px;
  font-weight: 500;
  color: #222;
  margin: 18px 0 12px 18px;
}
.default-switch {
  display: flex;
  align-items: center;
  margin: 18px 0 12px 0;
  font-size: 15px;
  color: #333;
  justify-content: space-between;
}
.form-tip {
  font-size: 13px;
  color: #888;
  background: #f6f7fb;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 16px;
}
</style> 